<!DOCTYPE html>
<html>
<head> 
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/jsp/head.jsp"%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-responsive.css">
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-text.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-button.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-menu.js"></script>
<script src="${pageContext.request.contextPath}/static/js/data/user.js"></script>
<script src="${pageContext.request.contextPath}/static/js/menu.js"></script>
<script type="text/javascript">
var table = null;
$(function () {
	
    $('#simpleTable1').BootstrapTable({
		columns: [
			{display : '登录名', name: 'loginName'},
			{display : '姓名', name: 'userName'},
			{display : '电话', name: 'userPhone'},
			{display : '移动电话', name: 'userMPhome'},
			{display : '电子邮箱', name: 'userEmail'},
		],
		data: user,
		usePager: true,
		actions: [				    
				    {
				    	text: '获取数据',
				    	position: 'top',
				    	cls: 'btn-sm btn-success',
				    	execute: function(){
				    		var data = $('#simpleTable1').BootstrapTable('getData');
				    		alert(JSON.stringify(data));
				    	}
				    }
				],		
	});    

    $('#simpleTable2').BootstrapTable({
		columns: [
			{display : '登录名', name: 'loginName'},
			{display : '姓名', name: 'userName'},
			{display : '电话', name: 'userPhone'},
			{display : '移动电话', name: 'userMPhome'},
			{display : '电子邮箱', name: 'userEmail'},
		],
		data: user,
		usePager: false,
		actions: [				    
				    {
				    	text: '设置数据',
				    	position: 'top',
				    	cls: 'btn-sm btn-success',
				    	execute: function(){
				    		$('#simpleTable2').BootstrapTable('setData',newdata).BootstrapTable('refresh');
				    	}
				    }
				],		
	});    
    
    
    $('#simpleTable3').BootstrapTable({
		columns: [
			{display : '登录名', name: 'loginName'},
			{display : '姓名', name: 'userName'},
			{display : '电话', name: 'userPhone'},
			{display : '移动电话', name: 'userMPhome'},
			{display : '电子邮箱', name: 'userEmail'},
		],
		data: user,
		usePager: true,
		actions: [				    
				    {
				    	text: '翻到第1页',
				    	position: 'top',
				    	cls: 'btn-sm btn-success',
				    	execute: function(){
				    		var newpage = 1;
				    		$('#simpleTable3').BootstrapTable('changePage',newpage);
				    	}
				    },
				    {
				    	text: '翻到第2页',
				    	position: 'top',
				    	cls: 'btn-sm btn-success',
				    	execute: function(){
				    		var newpage = 2;
				    		$('#simpleTable3').BootstrapTable('changePage',newpage);
				    	}
				    }				    
				],		
	});    
    
    $('#remoteTable1').BootstrapTable({
		columns: [
			{display : '登录名', name: 'LOGIN_NAME'},
			{display : '姓名', name: 'USER_NAME'},
			{display : '电话', name: 'USER_PHONE'},
			{display : '移动电话', name: 'USER_M_PHOME'},
			{display : '电子邮箱', name: 'USER_EMAIL'},
		],
		url: '${pageContext.request.contextPath}/TtApplicationUserController/getUserListByPageQuery',
		usePager: true		
	});    
    
    /*
    $('#simpleTable4').BootstrapTable({
		columns: [
			{display : '登录名', name: 'loginName'},
			{display : '姓名', name: 'userName'},
			{display : '电话', name: 'userPhone'},
			{display : '移动电话', name: 'userMPhome'},
			{display : '电子邮箱', name: 'userEmail'},
		],
		data: user,
		usePager: true,
		actions: [				    
				    {
				    	text: '<button class="btn btn-success btn-sm">排序</button>',
				    	position: 'top',
				    	execute: function(){
				    		$('#simpleTable4').BootstrapTable('sortData','userName',-1);
				    	}
				    }				    
				],		
	});
    */
    $('#simpleTable4').BootstrapTable({
		columns: [
			{display : '登录名', name: 'loginName'},
			{display : '姓名', name: 'userName'},
			{display : '电话', name: 'userPhone'},
			{display : '移动电话', name: 'userMPhome', type: 'number'},
			{display : '电子邮箱', name: 'userEmail'},
			{display : '生日', name: 'birthDay',type: 'date'},
		],
		data: mydata,
		usePager: true,
		actions: [				    
				    {
				    	text: '排序',
				    	position: 'top',
				    	cls: 'btn-sm btn-success',
				    	execute: function(){
				    		$('#simpleTable4').BootstrapTable('sortData','userName',-1);
				    	}
				    }				    
				],		
	});
    
    
    $('#simpleTable5').BootstrapTable({                            
		columns: [                                                 
			{display : '登录名', name: 'loginName'},                  
			{display : '姓名', name: 'userName'},                    
			{display : '电话', name: 'userPhone'},                   
			{display : '移动电话', name: 'userMPhome'},                
			{display : '电子邮箱', name: 'userEmail'},                 
		],                                                          
		data: user,
		checkbox: true,
		usePager: true,
		actions: [				    
				    {
				    	text: '获取checkedData',
				    	position: 'top',
				    	cls: 'btn-sm btn-success',
				    	execute: function(){
				    		var data = $('#simpleTable5').BootstrapTable('getCheckedData');
				    		alert(JSON.stringify(data));
				    	}
				    }				    
				],		
    });    
    
});

function search(){
	var condition = {userName: $("#userName").val(),loginName: $("#loginName").val()};
	$('#remoteTable1').BootstrapTable('setParm',{condition: JSON.stringify(condition)}).BootstrapTable('refresh');
}

</script>
</head>

<body>       
	<div class="container">
	    <nav id="menu"></nav>	
		<div class="panel panel-default">
	        <div class="panel-heading">获取表格数据</div>
			<div class="panel-body">
		        <div id="simpleTable1"></div>
		     </div>
		     <div class="panel-footer">
                                               获取表格数据的接口方法为getData,调用方式如下：                                                                              </br>
              $('#simpleTable1').BootstrapTable('getData');          </br>
                                                注： getData方法是获取当前页数据，不是获取所有数据                                                                      </br>                                
		     </div>
	    </div>
	    
		<div class="panel panel-default">
	        <div class="panel-heading">设置表格数据</div>
			<div class="panel-body">
		        <div id="simpleTable2"></div>
		     </div>
		     <div class="panel-footer">
                                              设置表格数据的接口方法为setData,调用方式如下：                                                                              </br>
              $('#simpleTable2').BootstrapTable('setData',newdata) </br>
              setData方法一般与refresh方法连用，表示设置数据之后再刷新，调用方法如下：                                               </br>
              $('#simpleTable2').BootstrapTable('setData',newdata).BootstrapTable('refresh')   </br>
              refresh方法单独使用如下：                                                                                                                                                                                                                           </br>
              $('#simpleTable2').BootstrapTable('refresh');                           
		     </div>
	    </div>	    

		<div class="panel panel-default">
	        <div class="panel-heading">翻页</div>
			<div class="panel-body">
		        <div id="simpleTable3"></div>
		     </div>
		     <div class="panel-footer">
                                              翻页方法为changePage,调用方式如下：                                                                                                                               </br>
              $('#simpleTable3').BootstrapTable('changePage',newpage)       </br>
              newpage为正整数，只有当usePager为true时changePage才起作用                                                    </br>                          
		     </div>
	    </div>

		<div class="panel panel-default">
	        <div class="panel-heading">设置远程调用参数</div>
			<div class="panel-body">
		        <div style="float:right;margin:5px"><button class="btn btn-primary btn-sm btn-search" type="button" onclick="search()">查询</button></div>
		        <div style="float:right;margin:5px" class="col-md-2"><input type="text" id="userName" class="form-control input-sm" placeholder="姓名"></div>
		        <div style="float:right;margin:5px" class="col-md-2"><input type="text" id="loginName" class="form-control input-sm" placeholder="登录名"></div>			
		        <div id="remoteTable1"></div>
		     </div>
		     <div class="panel-footer">
                                               设置远程调用参数方法为setParm,调用方式如下：                                                                                                                                                                                                                                                                                                                    </br>
	          var condition = {userName: $("#userName").val(),loginName: $("#loginName").val()};                                         </br>
	          $('#remoteTable1').BootstrapTable('setParm',{condition: JSON.stringify(condition)}).BootstrapTable('refresh');             </br>
                                                只有远程模式载入数据时setParm才起作用                                                                                                                                                                                                                                                                                                                                                </br>
                                                注：建议setParm的时候将所有要传递的参数包裹成一个json对象，这样在controller接收的时候就不需要写很多参数                                                                                                                                                                               </br>
		     </div>
	    </div>

		<div class="panel panel-default">
	        <div class="panel-heading">排序</div>
			<div class="panel-body">
		        <div id="simpleTable4"></div>
		     </div>
		     <div class="panel-footer">
		                            排序方法简略说明：                                                                                                                                                                                     </br>
			    $('#simpleTable4').BootstrapTable({                            </br>
					columns: [                                                 </br>
						{display : '登录名', name: 'loginName'},                  </br>
						{display : '姓名', name: 'userName'},                    </br>
						{display : '电话', name: 'userPhone'},                   </br>
						{display : '移动电话', name: 'userMPhome'},                </br>
						{display : '电子邮箱', name: 'userEmail'},                 </br>
					],                                                          </br>
					data: user,                                                 </br>
					usePager: true,                                              </br>
					actions: [	                                                                         </br>			    
							    {                                                                        </br>
							    	text: '&lt;button class="btn btn-success btn-sm"&gt;排序&lt;/button&gt;',         </br>
							    	position: 'top',                                                     </br>
							    	execute: function(){                                                  </br>
							    		$('#simpleTable4').BootstrapTable('sortData','userName',-1);    </br>
							    	}                                                                     </br>
							    }                                                                          </br>				    
							],                                                                             </br>		
				});	                                                                                        </br>
				排序方法为sortData，调用方式如下：                                                                                                                                                                                                                                          </br>
				$('#simpleTable4').BootstrapTable('sortData','userName',-1);                             </br>
				sortData方法有两个参数，第一个参数为被排序列的列名，第二个参数为排序方式：1为正序，-1为倒序                                                                                                     </br>
				插件已经集成排序方法到表头，点击表头的列可对该列进行排序                                                                                                                                                                                                    </br>
				注：排序不能用于远程分页加载                                                                                                                                                                                                                                                                  </br>	                                                                                                                                                                               </br>
		     </div>
	    </div>
	    
		<div class="panel panel-default">
	        <div class="panel-heading">获取checkedData</div>
			<div class="panel-body">
		        <div id="simpleTable5"></div>
		     </div>
		     <div class="panel-footer">
		                            获取checkedData方法简略说明：                                                                                                                                                                                     </br>
			    $('#simpleTable5').BootstrapTable({                            </br>
					columns: [                                                 </br>
						{display : '登录名', name: 'loginName'},                  </br>
						{display : '姓名', name: 'userName'},                    </br>
						{display : '电话', name: 'userPhone'},                   </br>
						{display : '移动电话', name: 'userMPhome'},                </br>
						{display : '电子邮箱', name: 'userEmail'},                 </br>
					],                                                          </br>
					data: newdata,                                                 </br>
					usePager: false,                                              </br>		
				});	                                                                                        </br>
				获取checkedData为getCheckedData，调用方式如下：                                                                                                                                                                                          </br>
				$('#simpleTable5').BootstrapTable('getCheckedData');                             </br>                                                                                                                                                                              </br>
		     </div>
	    </div>	    
	    	    	          
	</div>
</body>

</html>